<template>
<div class="content">
  <header>
      <ul><li @click="back()" class="grey"><img class="back-icon" src="~assets/img/icon_l@2x.png" alt=""> 返回</li><li><h2 style="font-size:16px">{{$parent.title}}</h2></li><li></li></ul>
  </header>
  <div class="rec-total-content">
    <div class="rec-total-title">
      <div class="title-left">我的推荐个数：<span v-text="recoNum"></span></div>
      <!-- <div class="title-right">累计收入：<span v-text="totalMoney+'元'"></span> </div> -->
    </div>
    <div class="rec_total_list">
      <div class="list-title tc">
          <span>编号</span>
          <span>级别</span>
          <!-- <span>金额</span> -->
          <span>区域</span>
          <span>接点</span>
          <span>日期</span>
      </div>
      <div class="list-item tc">
        <ul>
          <li v-for="(item, index) in recommendList" :key="index" @click="setRegion(item.uid,item.is_new)">
            <span class="news" v-if="item.is_new === 1">新</span>
            <span v-text="item.uid"></span>
            <span v-text="item.level"></span>
            <!-- <span v-text="item.amount"></span> -->
            <span v-text="item.region"></span>
            <span v-text="item.contact"></span>
            <span v-text="item.create_time"></span>
          </li>
          <!-- <button class="common-btn loder" ref="loder" v-if="showBtn">点击加载更多</button> -->
        </ul>
        <p v-if="isNum" class="noneNum">暂无推荐</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { Indicator } from 'mint-ui'
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      recommendList: [],
      // totalMoney: 0,
      recoNum: 0,
      isMore: true,
      showBtn: true,
      isNum: false
    }
  },
  mounted () {
    this.getRecList()
  },
  methods: {
    // 导航返回
    back() {
      this.$router.push('/recommand')
    },
    // 获取直推统计
    getRecList () {
      apiPost('user_recommend_list',
        {}).then((res) => {
        if (res.status === 0) {
          let data = res.data
          this.recommendList = data.recommendList
          this.recoNum = data.reco_num
          if (this.recoNum === 0) {
            this.isNum = true
          } else {
            this.isNum = false
          }
        } else {
          console.log(res.msg)
        }
      })
    },
    // 判断是否为新加入，如果为新跳转到选择页面
    setRegion (id, isNew) {
      if (isNew === 1) {
        this.$cookie.set('recommonId', id)
        this.$router.push('/rec_region')
      }
    },
    // 加载更多
    // loderMore () {
    //   Indicator.open()
    //   apiPost('user_recommend_list',
    //     {
    //       'start': this.recommendList.length,
    //       'limit': 2
    //     }).then((res) => {
    //       Indicator.close()
    //     if (res.status === 0) {
    //       let data = res.data
    //       console.log(data)
    //       for (var i = 0; i < data.recommendList.length; i++) {
    //         this.recommendList.push(data.recommendList[i])
    //       }
    //       this.recoNum = data.reco_num
    //       this.totalMoney = data.total_money
    //       if (this.recommendList.length === data.count) {
    //         this.$refs.loder.innerHTML = '没有更多了'
    //         this.$refs.loder.style.opacity = '0.5'
    //       }
    //       // console.log(this.recommendList)
    //     } else {
    //       console.log(res.msg)
    //     }
    //   })
    // }
  }
}
</script>

<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .rec-total-content {
    .rec-total-title {
      display: flex;
      padding: 16px;
      background-color: #fff;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      font-size: $font-15;
      span {
        color: $color-font-two;
      }
      .title-left,.title-right {
        flex: 1;
      }
      // .title-left {
      //   border-right: 1px solid #e5e5e5;
      // }
      .title-right {
        text-align: right;
      }
    }
    .rec_total_list {
      margin-top: 10px;
      .list-title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 0;
        background-color: #fff;
        font-size: $font-15;
        span {
          flex: 1;
        }
      }
    }
    .list-item {
      ul {
        li {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 16px 0;
          font-size: $font-12;
          .news {
            position: absolute;
            left: 10px;
            top: 2px;
            color: #ff0000;
            font-weight: bold;
          }
          span {
            flex: 1;
          }
          &:nth-child(odd) {
            background-color:#e5e5e5;
          }
        }
      }
    }
    .loder {
      opacity: 1;
      margin-bottom: 50px;
    }
    .noneNum {
      line-height: 36px;
    }
  }
</style>
